<template>
	<base-page>
		<view slot="header">
			<!-- #ifdef MP-WEIXIN -->
			<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">设置</block></cu-custom>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<block>
				<cu-custom :isBack="true" bgColor="bg-white"><block slot="content">设置</block></cu-custom>
			</block>
			<!-- #endif -->
		</view>
		<view slot="center" class="auto-100 main-wrapper">
			<view class="info-list ">
				<view class="info-item df-cen-rl" v-for="(item, index) in personalInfoList" :key="index" @click="toWhereByName(item)">
					<view class="info-name">{{ item.name }}</view>
					<view class="icon"><image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png" mode="" /></view>
				</view>
			</view>
			<view class="info-list ">
				<view class="info-item df-cen-rl" v-for="(item, index) in foList" :key="index" @click="toWhereByName(item)">
					<view class="info-name">{{ item.name }}</view>
					<view class="icon"><image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/setting/rightarrow.png" mode="" /></view>
				</view>
			</view>
			<view class="logout" @click="logout">登出账户</view>
		</view>
	</base-page>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			personalInfoList: [
				{
					name: '个人信息设置',
					url: '/publicPages/setup/info',
					auth: true
				},
				{
					name: '账号管理',
					url: '/publicPages/setup/binding',
					auth: true
				},
				{
					name: '收货地址',
					url: '/publicPages/setup/address',
					auth: true
				},
				{
					name: '安全中心',
					url: '/publicPages/setup/setpsw',
					auth: true
				},
				{
					name: '支付密码',
					url: '/chatPages/password/password',
					auth: true
				}
			],
			foList: [
				{
					name: '帮助反馈',
					url: '/publicPages/setup/helper',
					auth: false
				},
				{
					name: '关于醒目购',
					url: '/publicPages/setup/about',
					auth: false
				}
				// {
				// 	name: '给个好评',
				// 	// url: '/about',
				// 	auth: false
				// }
			]
		};
	},
	onLoad(e) {},
	onShow(e) {},
	methods: {
		...mapMutations(['OUT_USER_INFO']),
		toWhereByName(item) {
			if (item.name == '帮助反馈') {
				this.$Router.push({
					path: '/chatPages/servicechat/servicechat',
					query: {
						servicer_id: 0
					}
				});
				return;
			}
			if (!item.url) return;
			this.$Router.push({
				path: item.url
			});
		},
		// 退出账户
		logout() {
			uni.showModal({
				title: '温馨提示',
				content: '是否确定退出当前账号？',
				success: res => {
					if (res.confirm) {
                       uni.removeStorageSync('userInfo');
						uni.removeStorageSync('token');
						// #ifdef MP-WEIXIN
						this.OUT_USER_INFO();
						this.$Router.reLaunch({
							path: '/shopPages/my/index'
						});
						// #endif
						// #ifdef H5
						if (this.isNativeApp()) {
							this.OUT_USER_INFO();
							// 延迟执行保证前端token清除
							setTimeout(() => {
								this.$Sdk.exitLogin();
							}, 300);
						} else {
							this.OUT_USER_INFO();
							this.$Router.reLaunch({
								path: '/shopPages/my/index'
							});
						}
						// #endif
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.main-wrapper {
	background-color: #f4f4f4;
}

.logout {
	background-color: #fff;
	padding: 15px 0;
	font-size: 14px;
	text-align: center;
}

.info-list {
	background-color: #fff;
	padding: 0 15px;
	border-bottom: 5px solid #f4f4f4;

	.info-item {
		border-bottom: 1px solid #f4f4f4;
		padding: 15px 0;

		.info-name {
			flex: 1;
			font-size: 14px;
		}

		.icon {
			width: 16px;
			height: 16px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		&:nth-last-child(1) {
			border-bottom: 0px solid #f4f4f4;
		}
	}
}
</style>
